<template>
  <div>
    <div style="z-index:3;margin-bottom:10px;">
        <el-breadcrumb separator-class="el-icon-arrow-right title">
            <el-breadcrumb-item :to="{ path: '/' }" style="font-size:20px;">首页</el-breadcrumb-item>
            <el-breadcrumb-item style="font-size:20px;">购物车</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <el-row class="Recommend list-box" v-infinite-scroll="load" style="overflow:auto">
      <el-col v-for="item,index in blindBoxInfoList" :key="index" class="infinite-list-item" :span="8" :offset="0.75">
        <el-card style="width: 500px;height: 260px;margin-bottom:5px;margin-top:5px" v-show="blindBoxInfoListShow"  shadow="hover">
          <div style="display: flex;flex-direction: row;">
            <img :src="item.blindBoxImage != null ? require('D:/毕设/前端/blind_box/src/assets/'+item.blindBoxImage):''" style="width: 200px;height: 200px"/>
              <div style="padding: 14px">
                盲盒名称：<span style="font-weight: 700">{{item.blindBoxName}}</span>
                <hr>
                盲盒价格：<span style="font-weight: 700">{{item.blindBoxPrice}}￥</span>
                <hr>
                盲盒数量：<span style="font-weight: 700">{{item.quantity}}</span>
                <hr>
                总价格：<span style="font-weight: 700">{{item.quantity * item.blindBoxPrice}}￥</span>
                <hr>
                <div class="bottom clearfix info">
                  <el-button style="margin-bottom:-10px" type="text" class="button" @click="buyBlindBox(item.blindBoxId,item.quantity)">购买盲盒</el-button>
                  <el-button type="text" class="button" @click="deleteShoppingCart(item.blindBoxId)">移出购物车</el-button>
                </div>
              </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  data() {
    return {
      buyBlindBoxDialog: false,
      blindBoxInfoListShow: false,
      blindBoxInfoList: [{
        blindBoxId : null,
        blindBoxName : null,
        blindBoxInfo : null,
        blindBoxImage : null,
        blindBoxPrice : null,
        quantity : null,
      }],
      blindBoxInfo:{
        blindBoxId : null,
        blindBoxName : null,
        money : null,
        quantity : null,
      },
      saleBlindBoxInfoList:[{
        blindBoxId : null,
        quantity : null,
      }],
      shoppingCartInfo:{
        blindBoxId : null,
        quantity : null,
      }
    };
  },
  created(){
    var token = localStorage.getItem("loginToken")
    this.$axios.get('/shoppingCart/queryShoppingCart',{headers:{"token": token}})
    .then(res => {
      if(res.data.code == 300){
        this.$message({
          showClose: true,
          message: res.data.msg,
          type: "warning"
        })
      }
      if(res.data.data != null){
        this.blindBoxInfoList = res.data.data
        this.blindBoxInfoListShow = true
        console.log(this.blindBoxInfoList)
      }
      // console.log(res)
    })
    .catch(err => {
      // console.error(err); 
    })
  },
  methods: {
    load() {
      this.count += 2;
    },
    buyBlindBox(blindBoxId,quantity){
      var token = localStorage.getItem("loginToken")
      this.saleBlindBoxInfoList.forEach(s=>{
        s.blindBoxId = blindBoxId
        s.quantity = quantity
      })
      if(token == null){
        this.$message({
          showClose: true,
          message: "购买失败，还未登陆",
          type: "error"
        })
      }else{
        this.$axios.post('/shoppingCart/buyBlindBox',this.saleBlindBoxInfoList,{headers:{"token": token}})
        .then(res=>{
          if(res.data.msg == "余额不足"){
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            })
          }
          if (res.data.msg == "请登录后再尝试购买") {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning"
            })
          }
          if (res.data.msg == "购买成功") {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "success"
            })
          }
        })
      }
      this.buyBlindBoxDialog = false
      this.reload()
    },
    deleteShoppingCart(blindBoxId){
        var token = localStorage.getItem("loginToken")
      this.shoppingCartInfo.blindBoxId = blindBoxId
      this.$axios.post('/shoppingCart/deleteShoppingCart',this.shoppingCartInfo,{headers:{"token": token}})
      .then(res=>{
        if(res.data.code == 300){
            this.$message({
            showClose: true,
            message: res.data.msg,
            type: "warning"
            })
        }
        if(res.data.code == 200){
            this.$message({
            showClose: true,
            message: res.data.msg,
            type: "success"
            })
        }
      })
      this.reload()
    }
  },
};
</script>

<style  lang="less" scoped>
.Recommend {
  width: auto;
  height: 800px;
  border-radius: 10px;
  background-color: rgba(170, 170, 170, 0.144);
  overflow-y: scroll;
}
.info{
  display: flex; 
  flex-direction: column;
}
.list-box::-webkit-scrollbar {
    width: 10px;
    // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
}
.list-box::-webkit-scrollbar {
    width: 10px;
    // height: 10px; // 高度写不写，都不影响，因为会根据内容的长度自动计算
}

.list-box::-webkit-scrollbar-thumb {
    background: #ccc; // 滑块颜色
    border-radius: 5px; // 滑块圆角
}

.list-box::-webkit-scrollbar-thumb:hover {
    background: rgb(80, 80, 80); // 鼠标移入滑块变色
}

</style>
